<template>
	<view>
		<nav-bar color="#fff" bgc="" bbtn>我的团队</nav-bar>
		<view class="top">
			<view class="tab">
				<view :class="{'active':activeFlag==1}" @click.stop="pageTab(1)">总榜({{allData.num}}人)</view>
				<view :class="{'active':activeFlag==2}" @click.stop="pageTab(2)">月榜</view>
			</view>
		</view>
		<view class="rank" v-for="(item,index) in allData.list">
			<image :src="returnImg(index)" mode="" v-if="index<=3"></image><text>ID:{{item.uid}}</text><text>总返佣：{{item.all_amount}}元</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
				activeFlag:1,
				allData:{}
			}
		},
		methods: {
			pageTab:function(index){
				this.activeFlag = index;
				this.getData()
			},
			getData:function(){
				let _this = this
				let param = {
					"token":this.token,
					"type":this.activeFlag
				}
				this.ajaxJson('myTeam',param,function(data){
					console.log(data);
					_this.allData = data
				})
			},
			returnImg:function(index){
				return "../../static/logo.png"
			}
		},
		onLoad:function(){
			this.getData()
		}
	}
</script>

<style scoped>
   .top{
   	   background-color: #FF9972;
   	   height: 7rem;
   	   padding: 3rem 0 0;
	   position: relative;
	   margin-bottom: 0.5rem;
   }
   .tab{
	   position: absolute;
	   bottom: 0;
	   background-color: #FD6E3D;
	   height: 3rem;
	   width: 100%;
   }
   .tab view{
	   width: 50%;
	   height: 3rem;
	   line-height: 3rem;
	   color: #fff;
	   float: left;
	   text-align: center;
   }
   .active{
	   background: #FF936D;
   }
   .rank image{
	   width: 1rem;
	   height: 1rem;
	   position: relative;
	   top: 0.15rem;
	   margin-right: 0.5rem;
   }
   .rank{
	   line-height: 2.5rem;
	   padding: 0 5%;
   }
   .rank text{
	   font-size: 0.85rem;
   }
   .rank text:nth-child(2){
	   color: #aaa;
   }
   .rank text:nth-child(3){
   	   float: right;
   }
</style>
